<template>
	<div class="home">
		<div class="title">
			<div class="input_box">
				<view class="uni-common-mt">
					<view class="uni-form-item uni-column">
						<input class="uni-input" confirm-type="search" placeholder="搜索" />
					</view>
				</view>
			</div>
			<div class="notice">
				<img src="../../myimg/xiaoxi.png" alt="">
			</div>
		</div>
		<div class="to_top"></div>
		<view class="uni-padding-wrap uni-common-mt back_blue">
			<view class="uni-flex uni-row">
				<view class="flex-item every_box" v-for="item in dataarr" @click="toSecond(item)">
					<!-- <navigator url="../../home/scan" hover-class="navigator-hover"> -->
					<div class="img_box">
						<img :src="item.url" alt="">
					</div>
					<div class="text">{{item.name}}</div>
					<!-- </navigator> -->
				</view>
			</view>
		</view>

		<div class="not_thing"></div>
		<view class="uni-padding-wrap uni-common-mt margin_top">
			<view class="uni-flex uni-row">
				<view class="flex-item every_box" v-for="item in dataleft" @click="toSecond(item)">
					<div class="img_box">
						<img :src="item.url" alt="">
					</div>
					<div class="text">{{item.name}}</div>
				</view>
			</view>
		</view>
		<div class="recommend_title">
			为你推荐
		</div>
		<navigator url="details" hover-class="navigator-hover">
			<div class="recommend_img">
				<img class="to_border" src="../../myimg/xiang.png" alt="">
			</div>
		</navigator>
		<div class="recommend_title">
			养宠必读
		</div>
		<div class="content_box">
			<dogarticle :dataval="pets"></dogarticle>
		</div>
		<div class="recommend_title">
			驯宠科普
		</div>
		<div class="content_box">
			<dogarticle :dataval="petss"></dogarticle>

		</div>

		<div class="not_anything"></div>
	</div>
</template>
<script>
	import one from '@/pages/myimg/4.jpg'
	import one1 from '@/pages/myimg/5.jpg'
	import one2 from '@/pages/myimg/6.jpg'
	import one3 from '@/pages/myimg/7.jpg'
	import one4 from '@/pages/myimg/8.jpg'
	import one5 from '@/pages/myimg/9.jpg'
	import one6 from '@/pages/myimg/10.jpg'
	import one7 from '@/pages/myimg/11.jpg'
	import one8 from '@/pages/myimg/12.jpg'
	import one9 from '@/pages/myimg/13.jpg'
	import one10 from '@/pages/myimg/14.jpg'
	import one11 from '@/pages/myimg/15.jpg'
	import one12 from '@/pages/myimg/16.jpg'
	import one13 from '@/pages/myimg/17.jpg'
	import one14 from '@/pages/myimg/18.jpg'

	import a1 from '@/pages/myimg/logo1.png'
	import a2 from '@/pages/myimg/logo2.png'
	import a3 from '@/pages/myimg/logo3.png'
	import a4 from '@/pages/myimg/logo4.png'
	import a5 from '@/pages/myimg/logo5.png'
	import a6 from '@/pages/myimg/logo6.png'
	import a7 from '@/pages/myimg/logo7.png'
	import a8 from '@/pages/myimg/logo8.png'

	import dogarticle from '@/pages/mypage/le_file/dogarticle'


	export default {
		props: {},
		components: {
			dogarticle
		},
		data() {
			return {
				text:'',
				background: ['red', 'color2', 'color3'],
				autoplay: true,
				interval: 2000,
				duration: 500,
				title: 'input',
				focus: false,
				inputValue: '',
				changeValue: '',
				dataarr: [{
					'name': '扫一扫',
					'url': a1,
					'address': '../../home/scan'
				}, {
					'name': '宠物定位',
					'url': a2,
					'address': '../../home/petsmap'
				}, {
					'name': '宠物中心',
					'url': a3,
					'address': '../../petscore/petscorelist'
				}, {
					'name': '同城服务',
					'url': a4,
					'address': 'canine/canine'
				}],
				
				dataleft: [{
					'name': '犬证服务',
					'url': a5,
					'address': '../../service/all'
				}, {
					'name': '宠物挂失',
					'url': a6,
					'address': 'loss?val=1'
				}, {
					'name': '宠物姻缘',
					'url': a7,
					'address': 'loss?val=2'
				}, {
					'name': '健康提醒',
					'url': a8,
					'address':'../remind/remind'
				}],
				pets: [{
						'img': one9,
						'name': '潇洒哥',
						'Gender': 'GG',
						'text': '宠物吠叫：注意管控好自己的宠物，不要随便对着人乱叫，以免发生意外。',
						"people": '24',
					},
					{
						'img': one1,
						'name': '胖头妹',
						'Gender': 'MM',
						'text': '外出带好全套装备：',
						"people": '30',
					}, {
						'img': one14,
						'name': '蹦屁哥',
						'Gender': 'MM',
						'text': '长度适宜的牵引绳：绳子太短活动不开，绳子太长不易控制，容易发生事故。',
						"people": '25',
					},
				],
				petss: [{
						'img': one14,
						'name': '潇洒哥',
						'Gender': 'GG',
						'text': '垃圾袋：清理宠物便后垃圾，保护环境卫生。 ',
						"people": '24',
					},
					{
						'img': one1,
						'name': '胖头妹',
						'Gender': 'MM',
						'text': '狗嘴套：为了杜绝狗狗咬人事件发生，在适当地点最好戴上以防万一。',
						"people": '30',
					}, {
						'img': one9,
						'name': '蹦屁哥',
						'Gender': 'MM',
						'text': '那就阿森纳那时的Iasi叫大家说的i氨基酸的就爱上邓丽君爱上了的就撒手大家拉克斯基大家说的',
						"people": '25',
					},
				],
				dataArray: [{
						"title": "犬只疫苗说明",
						"content": "根据疫苗免疫条例的实施，全城应...",
						"imgurl": one
					},
					{
						"title": "关于进一步加强巴城宠物犬只管理的公告",
						"content": "为进一步加强城市犬只管理，维护...",
						"imgurl": one1
					},
					{
						"title": "个人养犬条例",
						"content": "应该采取圈养或拴养于居民住生活...",
						"imgurl": one2
					},
					{
						"title": "上海市养犬管理条例",
						"content": "对养犬人的行为规范做了更为详实...",
						"imgurl": one3
					},
					{
						"title": "小区宠物管理",
						"content": "目的 为加强小区宠物饲养管理,保...",
						"imgurl": one4
					},
					{
						"title": "养犬实行严格控制",
						"content": "不准饲养狂犬，野犬及其他违反规...",
						"imgurl": one5
					},
					{
						"title": "公共场所",
						"content": "不准携带犬只进入其他公共场所，...",
						"imgurl": one6
					}
				]
			}
		},
		methods: {

			//犬证
			toSecond(item) {
				uni.navigateTo({
					"url": item.address,
				});
			},

			onKeyInput: function(event) {
				this.inputValue = event.target.value
			},
			replaceInput: function(event) {
				var value = event.target.value;
				if (value === '11') {
					this.changeValue = '2';
				}
			},
			hideKeyboard: function(event) {
				if (event.target.value === '123') {
					uni.hideKeyboard();
				}
			}
		},
		watch: {},

		onReachBottom() { //页面上拉触底事件的处理函数

		},
		onPullDownRefresh() { //监听用户下拉动作，一般用于下拉刷新
			//需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
			//uni.startPullDownRefresh(); 开启
			// uni.stopPullDownRefresh(); 关闭
		},
		onUnload() { //监听页面卸载

		},
		onHide() { //监听页面隐藏

		},
		onLoad() { // 替代 created 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例

		},
		onReady() { //替代 mounted 监听页面初次渲染完成

		},

		onShow() { //监听页面显示
			//生命周期
		}
	}
</script>
<style scoped>
	.home {
		width: 100%;
		height: 100%;
		background: white;
	}

	.content_box {
		width: 90%;
		margin: auto;
	}

	.title {
		width: 100%;
		height: 13vw;
		font-size: 7vw;
		line-height: 18vw;
		position: fixed;
		background: #1984d2;
	}
.margin_top{
	width: 100%;
}
	.to_top {
		width: 100%;
		height: 16vw;
		background: #1984d2;
	}

	.to_border {
		border-radius: 5px;
	}

	.notice {
		width: 10%;
		height: 10vw;
		float: left;
	}

	.not_thing {
		width: 100%;
		height: 5vw;
		background: white;
	}

	.uni-common-mt {
		margin-top: 0px;
	}

	.back_blue {
		background: #1984d2;
		width: 100%;
		color: white;
	}

	.input_box {
		width: 83%;
		height: 100%;
		padding-left: 15px;

		float: left;
	}

	.soller {
		width: 70%;
		height: 50vw;
	}

	.new_img {
		width: 30%;
		height: 28vw;
	}

	.new_left {
		width: 73%;
	}

	.new_right {
		width: 25%;
	}

	.not_anything {
		height: 50px;
		width: 100%;
		background: white;
	}

	.uni-input {
		border-radius: 10px;
		width: 85%;
	}

	.img_box {
		width: 10vw;
		height: 10vw;
		margin: auto;
	}

	.img_box_but {
		width: 100%;
		height: 15vw;
		margin-top: 1vw;

	}

	.new_title {
		width: 90%;
		height: 7vw;
		line-height: 7vw;
		font-weight: bold;
		font-size: 2vw;
	}

	.new_box {
		height: 17vw;
		border-bottom: 1px solid #ededed;
	}

	.recommend_img {
		width: 80%;
		height: 40vw;
		margin: auto;
	}

	.swiper_box {
		width: 96%;
		height: 50vw;
	}

	.recommend_title {
		width: 100%;
		height: 13vw;
		line-height: 10vw;
		padding-left: 15px;
		margin-top: 10px;
		font-weight: bold;
		border-top: 5px solid #ededed;
	}

	.new_content {
		width: 90%;
		height: 7vw;
		line-height: 7vw;
		font-size: 2vw;
		color: gray;
	}

	img {
		width: 100%;
		height: 100%;

	}

	.swiper-item {
		height: 40vw;
	}

	.every_box {
		width: 25.5%;
		height: 18vw;
	}

	.text {
		width: 100%;
		height: 10%;
		text-align: center;
		margin-top: 5px;
		font-size: 5px;
	}


	.slide-box {
		display: -webkit-box;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}

	/* 隐藏下方的滚动条 */
	.slide-box::-webkit-scrollbar {
		background-color: transparent;
	}

	.slide-box {
		-ms-overflow-style: none;
	}

	.slide-box {
		overflow: -moz-scrollbars-none;
	}


	.slide-item {
		width: 20%;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}
	.uni-input{
		width: 95%;
		height:36px;
		padding:0px 15px;
	}
</style>
